<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
    <script src="dist/echarts.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: 'dist'
            }
        });
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('main')); 
                
                var option = {
				   title: {
				       subtext: "PRG园所管理",
				       sublink: "http://prgteam.com/",
				       text: "活跃度分析"
				   },
				   tooltip: {
				       trigger: "axis"
				   },
				   legend: {
				       data: ["本园所月度", "所有园所本月均值"],
				       x: "right"
				   },
				   toolbox: {
				       feature: {
				           mark: {
				               show: true
				           },
				           dataView: {
				               show: true,
				               readOnly: true
				           },
				           magicType: {
				               show: false,
				               type: ["line", "bar"]
				           },
				           restore: {
				               show: true
				           },
				           saveAsImage: {
				               show: true
				           }
				       }
				   },
				   calculable: true,
				   xAxis: [
				       {
				           type: "category",
				           boundaryGap: false,
				           data: ["1月", "2月", "3月", "4月"]
				       }
				   ],
				   yAxis: [
				       {
				           type: "value",
				           name: "条数"
				       }
				   ],
				   series: [
				       {
				           name: "本园所月度",
				           type: "line",
				           data: [12, 7, 13, 18]
				       },
				       {
				           name: "所有园所本月均值",
				           type: "line",
				           data: [10, 13, 11, 13]
				       }
				   ]
				};
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
            }
        );
    </script>
</body>